/**
 * 画布类
 */
import {addComponentUrl} from "@/utils/Utils";

let singleton;

class Canvas {

    constructor() {
        if (!singleton) {
            // 保存画布，定时保存
            this.time = setInterval(() => {
                this.saveComponentLocal();
            }, 500);
            singleton = this;
        }
        return singleton;
    }

    /**
     * 创建一个新的画布
     * @param width 宽
     * @param height 高
     * @param background 背景色
     * @param backgroundImage 背景图片
     * @param name 画布名称
     * @param data 组件名称
     * @param vue vue对象
     */
    init(width = 1920, height = 1080, background = '#fff', backgroundImage = '', name = '新的画布', data = [], vue) {
        var that = this;
        this.vue = vue;
        this.canvas = {
            base: {
                width: width,
                height: height,
                background: background,
                backgroundImage: backgroundImage,
                name: name
            }
            ,
            data: data
        }

    }

    /**
     * 画布上添加一个组件
     * @param url 加载组件的地址
     * @param component 组件
     */
    async addComponent(item, fun) {
        var that = this;
        addComponentUrl([item.src]).then(() => {
            let component = {
                name: item.name,
                config: JSON.parse(JSON.stringify(window[item.name + "Config"])),
                left: 0,
                top: 0,
                width: 200,
                height: 200,
                z: 455,
                showDownUp: false,
                uuid: window.uuid()
            };
            that.canvas.data.push(component);
            fun();
        });
    }

    /**
     * 保存到本地数据
     */
    saveComponentLocal() {
        var canvas = {
            time: new Date(),
            data: this.canvas
        }
        window.localStorage.setItem('canvas', JSON.stringify(canvas));
    }

    /**
     * 删除指定组件
     * @param uuid
     */
    deleteComponent(uuid = "") {
        var choseComponentIndex;
        for (var item in this.canvas.data) {
            if (this.canvas.data[item].uuid == uuid) {
                choseComponentIndex = item;
            }
        }
        if (choseComponentIndex == undefined) {
            console.log("无法删除组件uuid不存在\nCan not delete component ,not find this uuid");
        }
        this.canvas.data.splice(choseComponentIndex, 1);
    }

    /**
     * 修改画布
     */
    editCanvasHeightAndWidth(height = 0, width = 0) {
        if (height == 0 || width == 0) {
            this.vue.$Message.warning('不允许修改画布长度为一个像素\n oh on the canvas is too small');
            console.error("不允许修改画布的长宽为一个像素\n oh on the canvas is too small");
            return;
        }
    }

    /**
     * 获取画布信息
     * @return {{data: Array, base: {background: string, backgroundImage: string, width: number, name: string, height: number}}|*}
     */
    getCanvasInfo() {
        if (this.canvas == undefined) {
            let canvas = JSON.parse(window.localStorage.getItem('canvas'));
            if (canvas == undefined) {
                this.init();
                return this.canvas;
            } else {
                this.canvas = canvas.data;
                return canvas.data;
            }
        } else {
            return this.canvas;
        }
    }

    /**
     * 清空本地缓存
     */
    deleteLocalCanvas() {
        window.localStorage.removeItem("canvas");
    }

    getLocalCanvas() {
        return JSON.parse(window.localStorage.getItem('canvas')).data;
    }
}

export {Canvas}
